// Anchor

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin anchor {
  display: flex;
  &-content {
    flex: 1;
  }
  &-affix {
    display: block;
  }
  &-slider {
    float: left;
    overflow: hidden;
    &:hover {
      overflow-y: auto;
    }
  }
  @include layout(right, row, left);
  @include layout(left, row-reverse, right);
}

@mixin layout($layout, $direction, $border) {
  &-#{$layout} {
    flex-direction: #{$direction};
    .x-slider-column > .x-slider-scroll {
      overflow-y: auto;
      > ul > li {
        border-#{$border}: 0.125rem solid $--x-border;
        &.x-slider-highlight {
          border: none;
          border-top-#{$border}-radius: 0;
          border-bottom-#{$border}-radius: 0;
          z-index: 2;
          border-#{$border}: 0.125rem solid $--x-primary;
        }
      }
    }
  }
}
